<template>
    <div>
        <div class="banner">
            <img v-lazy="brand.list_pic_url" alt="">
            <h2>{{brand.name}}</h2>
        </div>
        <p>{{brand.simple_desc}}</p>
        <div class="mychanpin">
            <Chanpin :chanpinArr="goodsList" />
        </div>
    </div>
</template>

<script>
import Chanpin from '@/components/Chanpin.vue'
    import {
        BrandDetailApi,
        BrandListApi
    } from "@/request/api"
    export default {
        data() {
            return {
                brand: {},
                goodsList: [],
            }
        },
        components: {
            Chanpin
        },
        created() {
            // 请求品牌详情
            BrandDetailApi({
                id: this.$route.params.id,
            }).then((res) => {
                // console.log(res);
                if (res.errno === 0) {
                    console.log(res.data);
                    let {
                        brand
                    } = res.data
                    this.brand = brand;
                }

            });

            BrandListApi({
                id: this.$route.params.id,
                size:100,
            }).then((res) => {
                console.log(res);
                if (res.errno === 0) {
                    console.log(res.data);
                    let {
                        goodsList
                    } = res.data
                    this.goodsList = goodsList;
                }

            });
        }
    }
</script>

<style lang="less" scoped>
    .banner {
        width: 100%;
        position: relative;

        img {
            display: block;
            width: 100%;
        }

        h2 {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            margin: auto;
            font-size: 20px;
            text-decoration: underline;
            color: #fff;
        }
    }

    p {
        background: #fff;
        font-size: 18px;
        text-align: center;
        padding: 20px 10px;
        line-height: 26px;
        color: #666;
        margin: 0;
    }

    .mychanpin{
        margin-top: 40px;
    }
</style>